<!--职位-->
<script lang="ts">
export default {
  name: 'loginlog'
};
</script>

<script setup lang="ts">
import {
  getSysLogPage,
  deleteSyslog
} from '@/api/syslog';


import { SysLogQuery, SysLogPageVO } from '@/api/syslog/types';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<SysLogQuery>({
  current: 1,
  pageSize: 10
});

const SysLogList = ref<SysLogPageVO[]>();

const dialog = reactive<DialogOption>({
  visible: false
});




const rules = reactive({
  label: [{ required: true, message: '请输入职位类型名称', trigger: 'blur' }],
  value: [{ required: true, message: '请输入职位值', trigger: 'blur' }],
  type: [{ required: true, message: '请输入职位类型编码', trigger: 'blur' }]
});

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getSysLogPage(queryParams)
    .then((res) => {
      console.log(res)
      SysLogList.value = res.data.data;
      total.value = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.current = 1;
  handleQuery();
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}










/**
 * 删除职位类型
 */
function handleDelete(loginlogId?: number) {
  const loginlogIds = loginlogId;
  if (!loginlogIds) {
    ElMessage.warning('请勾选删除项');
    return;
  }

  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteSyslog(loginlogId).then(() => {
      ElMessage.success('删除成功');
      resetQuery();
    });
  });
}






onMounted(() => {
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <!-- <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->

    <el-card shadow="never">
      <el-table highlight-current-row :data="SysLogList" v-loading="loading" border>
        <el-table-column label="ID" prop="id" />
        <el-table-column label="用户名称" prop="userName" />
        <el-table-column label="IP地址" prop="ip" />
        <!-- <el-table-column label="用户操作" prop="operation"  /> -->
        <el-table-column label="请求方法" prop="method" />
        <el-table-column label="执行时间" prop="time" />
        <!-- <el-table-column label="登录状态" align="center" >
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'login'" type="success">登入</el-tag>
            <el-tag v-else type="info">退出</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="创建人" prop="createBy" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作参数" prop="createTime">
          <template #default="scope">
            {{ scope.row.params }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="更新人" prop="lastUpdateBy" />
        <el-table-column label="更新时间" prop="lastUpdateTime"  /> -->
        <!-- <el-table-column fixed="right" label="操作" align="center" width="220">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click.stop="handleDelete(scope.row.id)"
              ><i-ep-delete />删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.current"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      width="500px"
      @close="closeDialog"
    >
      <el-form
        ref="dataFormRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="职位名称" prop="jobName">
          <el-input v-model="formData.jobName" placeholder="请输入职位名称" />
        </el-form-item>

        <el-form-item label="状态" prop="delFlag">
          <el-radio-group v-model="formData.delFlag">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="formData.orderNum" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            placeholder="职位类型备注"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog> -->

    <!--职位数据弹窗-->
    <!-- <el-dialog
      :title="dictDataDialog.title"
      v-model="dictDataDialog.visible"
      width="1000px"
      @close="closeDictDialog"
    >
      <dict-data
        v-model:typeCode="selectedDictType.typeCode"
        v-model:typeName="selectedDictType.typeName"
      />
    </el-dialog> -->
  </div>
</template>
